<template>
  <div class="main">
    <van-nav-bar title="主页" left-arrow @click-left="onClickLeft" />

    <van-tabs type="line" animated swipeable>
      <van-tab title="施肥状态">
        <div class="empty" v-if="shifeiList.length === 0">
          <van-empty description="暂无内容" />
        </div>
        <div v-else class="main-content">
          <div class="main-content-Btn">
            <van-button
              @click="onStart(1)"
              round
              block
              color="linear-gradient(to right, #ff6034, #ee0a24)"
              >施肥开始</van-button
            >
          </div>
          <van-cell-group inset>
            <van-cell
              center
              v-for="item in shifeiList"
              :key="item"
              class="main-content-cell"
              :title="item.deviceName"
              :label="item.label"
            >
              <!-- <template #right-icon>
                <van-switch v-model="item.state" size="24" />
              </template> -->
            </van-cell>
          </van-cell-group>
          <div class="main-content-Btn">
            <div class="main-content-Btn-Box">
              <van-button
                @click="onPause(1)"
                class="main-content-Btn-Box-Btn"
                round
                block
                type="warning"
                >暂停/继续</van-button
              >
              <van-button
                @click="onStop(1)"
                class="main-content-Btn-Box-Btn"
                round
                block
                type="danger"
                >停止</van-button
              >
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="打药状态">
        <div class="empty" v-if="dayaoList.length === 0">
          <van-empty description="暂无内容" />
        </div>
        <div v-else class="main-content">
          <div class="main-content-Btn">
            <van-button
              @click="onStart(2)"
              round
              block
              color="linear-gradient(to right, #ff6034, #ee0a24)"
              >打药开始</van-button
            >
          </div>
          <van-cell-group inset>
            <van-cell
              center
              v-for="item in dayaoList"
              :key="item"
              class="main-content-cell"
              :title="item.deviceName"
              :label="item.label"
            >
              <!-- <template #right-icon>
                <van-switch v-model="item.state" size="24" />
              </template> -->
            </van-cell>
          </van-cell-group>
          <div class="main-content-Btn">
            <div class="main-content-Btn-Box">
              <van-button
                @click="onPause(2)"
                class="main-content-Btn-Box-Btn"
                round
                block
                type="warning"
                >暂停/继续</van-button
              >
              <van-button
                @click="onStop(2)"
                class="main-content-Btn-Box-Btn"
                round
                block
                type="danger"
                >停止</van-button
              >
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="水泵施肥/打药状态">
        <div class="main-content-tip">水泵施肥</div>
        <div class="empty" v-if="shuibengShifeiList.length === 0">
          <van-empty description="暂无内容" />
        </div>
        <div v-else class="main-content">
          <van-cell-group inset>
            <van-cell
              center
              v-for="item in shuibengShifeiList"
              :key="item"
              class="main-content-cell"
              :title="KeyName(item.deviceName)"
              :label="item.label"
            >
              <template #right-icon>
                <van-switch
                  @click="changeSwitch(1, item)"
                  :disabled="!item.now"
                  v-model="item.state"
                  size="24"
                />
              </template>
            </van-cell>
          </van-cell-group>
          <div class="main-content-Btn">
            <van-button
              @click="onStart(3)"
              round
              block
              color="linear-gradient(to right, #ff6034, #ee0a24)"
              >水泵施肥开始</van-button
            >
          </div>
        </div>
        <div class="main-content-tip">水泵打药</div>
        <div class="empty" v-if="shuibengDayaoList.length === 0">
          <van-empty description="暂无内容" />
        </div>
        <div v-else class="main-content">
          <van-cell-group inset>
            <van-cell
              center
              v-for="item in shuibengDayaoList"
              :key="item"
              class="main-content-cell"
              :title="KeyName(item.deviceName)"
              :label="item.label"
            >
              <template #right-icon>
                <van-switch
                  @click="changeSwitch(2, item)"
                  :disabled="!item.now"
                  v-model="item.state"
                  size="24"
                />
              </template>
            </van-cell>
          </van-cell-group>
          <div class="main-content-Btn">
            <van-button
              @click="onStart(4)"
              round
              block
              color="linear-gradient(to right, #ff6034, #ee0a24)"
              >水泵打药开始</van-button
            >
          </div>
        </div>
        <div
          v-if="
            shuibengDayaoList.length !== 0 || shuibengShifeiList.length !== 0
          "
          class="main-content-Btn-Box"
        >
          <van-button
            @click="onPause(3)"
            class="main-content-Btn-Box-Btn"
            round
            block
            type="warning"
            >暂停/继续</van-button
          >
          <van-button
            @click="onStop(3)"
            class="main-content-Btn-Box-Btn"
            round
            block
            type="danger"
            >停止</van-button
          >
        </div>
      </van-tab>
    </van-tabs>
    <div style="text-align: center" class="main-content-tip">
      数据更新时间：{{ lastTime }}
    </div>
  </div>
</template>

<script>
import { stringToByte } from "@/utils/dateCon";
import { Dialog } from "vant";
export default {
  data() {
    return {
      lastTime: "",
      shifeiList: [],
      dayaoList: [],
      shuibengDayaoList: [],
      shuibengShifeiList: [],
      paramsRes: "",
      keyName: {
        水泵施肥1: "增压水泵",
        水泵施肥2: "搅拌电机",
        水泵施肥3: "主水阀门",
        水泵施肥4: "肥料阀门",
        水泵打药1: "增压水泵",
        水泵打药2: "搅拌电机",
        水泵打药3: "主水阀1",
        水泵打药4: "主水阀2",
      },
    };
  },
  watch: {
    paramsRes: {
      handler(newVal, oldVal) {
        this.dataConver(newVal);
      },
      deep: true,
    },
  },
  created() {
    this.paramsRes = this.$route.params;
    this.dataConver(this.paramsRes);
  },
  methods: {
    KeyName(key) {
      return this.keyName[key];
    },
    onClickLeft() {
      this.$router.back();
    },
    onPause(key) {
      if (!this.paramsRes.mqttMsg.now) {
        Dialog.alert({
          title: "提示",
          message: "设备离线，无法操作",
        }).then(() => {
          // on close
        });
        return;
      }
      var hex;
      switch (key) {
        case 1:
          hex = "A1 01 00 01 00 02 1A";
          break;
        case 2:
          hex = "A1 01 00 02 00 02 1A";
          break;
        case 3:
          hex = "A1 01 00 03 00 03 1A";
          break;
        default:
          break;
      }
      console.log(hex);
      var send = stringToByte(hex);
      this.$mqtt.publishHex(this.paramsRes.deviceInfo.mqttSub, send);
    },
    onStart(e) {
      if (!this.paramsRes.mqttMsg.now) {
        Dialog.alert({
          title: "提示",
          message: "设备离线，无法操作",
        }).then(() => {
          // on close
        });
        return;
      }
      var hex;
      switch (e) {
        case 1:
          hex = "A1 01 00 01 00 01 1A";
          break;
        case 2:
          hex = "A1 01 00 02 00 01 1A";
          break;
        case 3:
          hex = "A1 01 00 03 00 01 1A";
          break;
        case 4:
          hex = "A1 01 00 03 00 02 1A";
          break;
        default:
          break;
      }
      console.log(hex);
      var send = stringToByte(hex);
      this.$mqtt.publishHex(this.paramsRes.deviceInfo.mqttSub, send);
    },
    onStop(key) {
      if (!this.paramsRes.mqttMsg.now) {
        Dialog.alert({
          title: "提示",
          message: "设备离线，无法操作",
        }).then(() => {
          // on close
        });
        return;
      }
      var hex;
      switch (key) {
        case 1:
          hex = "A1 01 00 01 00 03 1A";
          break;
        case 2:
          hex = "A1 01 00 02 00 03 1A";
          break;
        case 3:
          hex = "A1 01 00 03 00 04 1A";
          break;
        default:
          break;
      }
      console.log(hex);
      var send = stringToByte(hex);
      this.$mqtt.publishHex(this.paramsRes.deviceInfo.mqttSub, send);
    },
    changeSwitch(e, item) {
      if (!this.paramsRes.mqttMsg.now) {
        return;
      }
      var hex;
      switch (e) {
        case 1:
          var name = item.deviceName;
          var x = "0" + name[name.length - 1];
          hex = "A1 01 00 04 00 " + x + " 1A";
          break;
        case 2:
          var name = item.deviceName;
          var x = "0" + name[name.length - 1];
          hex = "A1 01 00 05 00 " + x + " 1A";
          break;
        default:
          break;
      }
      console.log(hex);
      var send = stringToByte(hex);
      this.$mqtt.publishHex(this.paramsRes.deviceInfo.mqttSub, send);
    },
    dataConver(newVal) {
      this.lastTime = newVal.mqttMsg.time;
      this.shifeiList = [];
      try {
        newVal.mqttMsg.shifeiList.forEach((element) => {
          var sItem = element.split(";");
          console.log(sItem);
          const item = {
            label: sItem[1],
            deviceName: sItem[0],
          };
          this.shifeiList.push(item);
        });
      } catch (error) {}
      this.dayaoList = [];
      try {
        newVal.mqttMsg.dayaoList.forEach((element) => {
          var sItem = element.split(";");
          const item = {
            label: sItem[1],
            deviceName: sItem[0],
          };
          this.dayaoList.push(item);
        });
      } catch (error) {}
      this.shuibengShifeiList = [];
      try {
        newVal.mqttMsg.shuibengShifeiList.forEach((element) => {
          var sItem = element.split(";");
          const item = {
            label: sItem[1],
            deviceName: sItem[0],
            state: sItem[1] === "关" ? false : true,
            now: newVal.mqttMsg.now,
          };
          this.shuibengShifeiList.push(item);
        });
      } catch (error) {}
      this.shuibengDayaoList = [];
      try {
        newVal.mqttMsg.shuibengDayaoList.forEach((element) => {
          var sItem = element.split(";");
          const item = {
            label: sItem[1],
            deviceName: sItem[0],
            state: sItem[1] === "关" ? false : true,
            now: newVal.mqttMsg.now,
          };
          this.shuibengDayaoList.push(item);
        });
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  position: absolute;
  &-content {
    &-tip {
      margin: 20px 20px 6px 26px;
      color: #fff;
    }
    &-Btn {
      margin: 20px;
      &-Box {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        &-Btn {
          margin: 0 10px;
        }
      }
    }
  }
}
.padding {
  padding-top: 20px;
}
.empty {
  z-index: 1;
  height: auto;
  border-radius: 20px;
  margin: 20px 20px;
  box-shadow: 0px 0px 12px 0 rgb(0 0 0 / 8%);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
}
</style>